import React from 'react'
import Dialog from '../ui-components/dialog'
import style from './style'
import Code from './Code'
import Link from '../ui-components/link'
import styleDialog from './style.dialog'

export default 
class Test extends React.Component {

	state = {
		active: false
	}

	show() {
		this.setState({
			active: true
		})
	}

	handleClick() {
		this.setState({
			active: false
		})
	}

	render() {
		return (
			<div className={style.root}>
				<Code>{'<Dialog close={..} title={..} actions={[..]} active={..} onOverlayClick={..}>{..}</Dialog>'}</Code>
				<div>
					<Link onClick={::this.show}>show</Link>
					<Dialog 
						className={styleDialog.root}
						close={::this.handleClick}
						onOverlayClick={::this.handleClick} 
						active={this.state.active}
						actions={[
							{
								handler: () => {
									this.setState({
										active: false
									})
								},
								label: '确定'
							}
						]}
						title='测试'
					>
						<p>hello world~~</p>
					</Dialog>
				</div>
			</div>
		)
	}
}
